import React from 'react';
import { Tabs, Input , Select , Button ,Table } from 'antd';
import './index.less';
import Axios from './../../axios';
import Utils from "../../utils/utils";
const TabPane = Tabs.TabPane;
const Option = Select.Option;

export default class SelUserDept extends React.Component{
    state = {
        //type:"USER",
    }
    componentWillMount(){
        this.userRequest();
        this.deptRequest();
        const userSelection = this.props.userSelection;
        if (userSelection){
            this.setState({
                type:userSelection.type
            })
        }else {
            this.setState({
                type:"USER",
            })
        }
    }
    handleChangeType = (key)=>{
        let ids=""
        let option=""
        if (key=="USER") {
            ids = this.state.userIds;
            option = this.state.userOption;
        }else if (key=="DEPT"){
            ids = this.state.deptIds;
            option = this.state.deptOption;
        }else if (key=="ALL"){
            ids = '["0"]';
            option = [
                {
                    props:{
                        children:"所有部门用户"
                    }
                }
            ];
        }
        let info = {
            type:key,
            ids,
            option
        }
        this.setState({
            type:key,
            info
        },()=>{
            this.props.getInfo(this.state.info);
        })
    }
    handleChangeUser = (ids,option)=>{
        ids = JSON.stringify(ids);
        /*let type = this.state.type;*/
        let type = "USER";
        let info = {
            type,
            ids,
            option
        }
        this.setState({
            userIds:ids,
            userOption:option,
            info
        },()=>{
            this.props.getInfo(this.state.info);
        })
    }
    handleChangeDept = (ids,option)=>{
        ids = JSON.stringify(ids);
        let type = this.state.type;
        let info = {
            type,
            ids,
            option
        }
        this.setState({
            deptIds:ids,
            deptOption:option,
            info
        },()=>{
            this.props.getInfo(this.state.info);
        })
    }
    //所有用户请求
    userRequest = ()=>{
        Axios.dataRequest({
            block:'/hr',
            url:'/user/allUserSmallInfos',
            params:"",
        }).then((data)=>{
            console.log(data)
            let users = data.data;
            /*id name userNo*/
            this.setState({
                users,
            })
        }).catch((error)=>{
            console.log(error);
        })
    }
    //所有部门请求
    deptRequest = ()=>{
        Axios.dataRequest({
            block:'/hr',
            url:'/department',
            params:"",
        }).then((data)=>{
            console.log(data)
            let depts = data.data;
            this.setState({
                depts,
            })
        }).catch((error)=>{
            console.log(error);
        })
    }
    render(){
        const users = this.state.users || [];
        const depts = this.state.depts || [];
        const userOptions = users.map((item)=>{
            return <Option key={item.id}>{item.name}</Option>;
        });
        const deptOptions = depts.map((item)=>{
            return <Option key={item.id}>{item.name}</Option>;
        });
        const userSelection = this.props.userSelection;
        const ids = userSelection.ids?JSON.parse(userSelection.ids):[];
        const defaultActiveKey = userSelection.type?userSelection.type:"USER";
        return(
            <div>
                <Tabs
                    tabBarGutter={15}
                    defaultActiveKey={defaultActiveKey}
                    onChange={this.handleChangeType}
                    animated={false}>
                    <TabPane tab="选择用户" key="USER">
                        <Select
                            mode="multiple"
                            placeholder="请选择用户"
                            onChange={this.handleChangeUser}
                            defaultValue={defaultActiveKey=="USER"?ids:[]}
                            style={{ width: '100%' }}
                        >
                            {userOptions}
                        </Select>
                    </TabPane>
                    <TabPane tab="选择部门" key="DEPT">
                        <Select
                            mode="multiple"
                            placeholder="请选择部门"
                            onChange={this.handleChangeDept}
                            defaultValue={defaultActiveKey=="DEPT"?ids:[]}
                            style={{ width: '100%' }}
                        >
                            {deptOptions}
                        </Select>
                    </TabPane>
                    <TabPane tab="全部人员" key="ALL">
                        <span>此项代表选择所有部门和人员</span>
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}